<template>
  <div class="proxy-settings-container">
    <div class="header">
      <div class="header-left" @click="action.back">
        <ChevronLeftIcon class="icon" /> 返回
      </div>
      <div class="header-center">
        <div class="title">API代理设置</div>
      </div>
    </div>

    <div class="content">
      <div class="description">
        <t-alert theme="info" title="关于API代理">
          <template #message>
            <p>
              如果您无法直接访问OpenAI官方API，可以在此页面配置代理服务。开启代理后，系统将通过代理服务器转发API请求。
            </p>
          </template>
        </t-alert>
      </div>

      <div class="proxy-form">
        <t-form
          ref="form"
          :data="formData"
          :rules="rules"
          @submit="action.saveConfig"
          layout="vertical"
        >
          <t-form-item label="代理服务状态" name="enabled">
            <t-switch v-model="formData.enabled" size="large" />
            <span class="status-text">{{ formData.enabled ? '已启用' : '已禁用' }}</span>
          </t-form-item>

          <t-form-item label="代理服务URL" name="proxyUrl">
            <t-input v-model="formData.proxyUrl" placeholder="请输入代理服务URL地址">
              <template #suffix>
                <t-tooltip content="请输入完整URL，包含https://前缀">
                  <InfoCircleIcon />
                </t-tooltip>
              </template>
            </t-input>
          </t-form-item>

          <t-divider></t-divider>

          <div class="usage-info">
            <h3>使用说明</h3>
            <ul>
              <li>
                <span class="info-label">默认代理:</span>
                <span class="info-value">https://804b7fa7dfd40fbd0cdc54b0a0f5e5f7.api-forwards.com/v1</span>
              </li>
              <li>
                <span class="info-label">代理状态:</span>
                <t-tag :theme="formData.enabled ? 'success' : 'warning'">
                  {{ formData.enabled ? '已启用' : '已禁用' }}
                </t-tag>
              </li>
              <li>
                <span class="info-label">连接方式:</span>
                <span class="info-value">{{ formData.enabled ? '代理服务' : 'OpenAI官方API' }}</span>
              </li>
            </ul>
          </div>

          <div class="form-footer">
            <t-space>
              <t-button theme="default" @click="action.reset">恢复默认</t-button>
              <t-button theme="primary" type="submit" :loading="saveLoading">保存配置</t-button>
            </t-space>
          </div>
        </t-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
  ChevronLeftIcon,
  InfoCircleIcon
} from 'tdesign-icons-vue-next';
import { useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import {
  getProxyConfig,
  updateProxyConfig,
  toggleProxyStatus
} from '@renderer/api/proxyConfig';

const router = useRouter();
const saveLoading = ref(false);
const formData = reactive({
  proxyUrl: 'https://804b7fa7dfd40fbd0cdc54b0a0f5e5f7.api-forwards.com/v1',
  enabled: false
});

// 表单验证规则
const rules = {
  proxyUrl: [
    { required: true, message: '请输入代理服务URL', trigger: 'blur' },
    {
      validator: (val) => {
        try {
          const url = new URL(val);
          return url.protocol === 'https:';
        } catch (e) {
          return false;
        }
      },
      message: '请输入有效的HTTPS URL',
      trigger: 'blur'
    }
  ]
};

// 加载代理配置
const loadConfig = async () => {
  try {
    const config = await getProxyConfig();
    if (config) {
      formData.proxyUrl = config.proxy_url || 'https://804b7fa7dfd40fbd0cdc54b0a0f5e5f7.api-forwards.com/v1';
      formData.enabled = !!config.enabled;
    }
  } catch (error) {
    console.error('加载代理配置失败:', error);
    MessagePlugin.error('加载代理配置失败: ' + (error.message || '未知错误'));
  }
};

const action = {
  // 返回上一页
  back() {
    router.push("/home");
  },

  // 保存配置
  async saveConfig({ validateResult }) {
    if (validateResult === true) {
      saveLoading.value = true;
      try {
        await updateProxyConfig(formData.proxyUrl, formData.enabled);
        MessagePlugin.success('代理设置保存成功');
      } catch (error) {
        console.error('保存代理设置失败:', error);
        MessagePlugin.error('保存代理设置失败: ' + (error.message || '未知错误'));
      } finally {
        saveLoading.value = false;
      }
    }
  },

  // 重置为默认值
  reset() {
    formData.proxyUrl = 'https://804b7fa7dfd40fbd0cdc54b0a0f5e5f7.api-forwards.com/v1';
  }
};

onMounted(() => {
  loadConfig();
});
</script>

<style lang="less" scoped>
.proxy-settings-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;  // 深色背景改为白色
  color: #333333;  // 白色文字改为深灰色

  .header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 23px;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    background-color: #ffffff;  // 深色背景改为白色
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色

    &-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      gap: 6px;
      cursor: pointer;
      padding-right: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.15);  // 半透明白色边框改为半透明黑色
      -webkit-app-region: no-drag;

      .icon {
        font-size: 20px;
      }
    }

    &-center {
      flex: 1;
      text-align: center;

      .title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;  // 白色文字改为深灰色
      }
    }
  }

  .content {
    flex: 1;
    padding: 20px;
    overflow: auto;

    .description {
      margin-bottom: 20px;

      :deep(.t-alert) {
        background-color: rgba(0, 82, 217, 0.05);  // 稍微减淡蓝色背景的透明度
        border-color: rgba(0, 82, 217, 0.3);  // 保留原有的蓝色边框
      }

      :deep(.t-alert__title) {
        color: #333333;  // 白色文字改为深灰色
      }

      :deep(.t-alert__message) {
        color: rgba(0, 0, 0, 0.7);  // 半透明白色改为半透明黑色
      }
    }

    .proxy-form {
      background-color: #f5f5f5;  // 深灰色背景改为浅灰色
      border-radius: 8px;
      padding: 24px;
      border: 1px solid #e0e0e0;  // 添加浅灰色边框，增强视觉层次

      :deep(.t-form__label) {
        color: #333333;  // 白色文字改为深灰色
      }

      .status-text {
        margin-left: 12px;
        color: #333333;  // 白色文字改为深灰色
      }

      :deep(.t-input) {
        --td-bg-color-specialcomponent: #ffffff;  // 深色输入框背景改为白色
        --td-text-color-primary: #333333;  // 白色文字改为深灰色
        --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

        input {
          background-color: #ffffff;  // 深色输入框背景改为白色
          border-color: #e0e0e0;  // 深色边框改为浅灰色
          color: #333333;  // 白色文字改为深灰色

          &:hover, &:focus {
            border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
          }
        }

        &:focus-within {
          box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加聚焦时的轻微蓝色阴影
        }
      }

      .usage-info {
        margin-bottom: 24px;

        h3 {
          color: #333333;  // 白色文字改为深灰色
          margin-bottom: 16px;
        }

        ul {
          background-color: #f9f9f9;  // 深色背景改为更浅的灰色
          padding: 16px;
          border-radius: 4px;
          list-style: none;
          border: 1px solid #e0e0e0;  // 添加浅灰色边框

          li {
            display: flex;
            align-items: center;
            margin-bottom: 12px;

            &:last-child {
              margin-bottom: 0;
            }

            .info-label {
              width: 100px;
              color: rgba(0, 0, 0, 0.7);  // 半透明白色改为半透明黑色
            }

            .info-value {
              font-family: monospace;
              color: #333333;  // 白色文字改为深灰色
              background-color: rgba(0, 0, 0, 0.03);  // 添加轻微背景色，增强代码区分度
              padding: 2px 6px;
              border-radius: 3px;
            }
          }
        }
      }
    }
  }
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
</style>
